<div class="layui-form-item">
    <label class="layui-form-label"><?php echo $field['title'] ?></label>
    <div class="layui-inline">


        <div id="upload2" class="dragFile2" style="padding: 20px;  border: 1px dashed #e2e2e2;  text-align: center; color: #999">

            <b>文件上传</b> <br>  (拖拽至此上传)

        </div>



<!--        <div class="layui-upload-drag layui-hide" id="upload">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>-->
        
        
        
        <input class="layui-input" type="text"  name="<?php echo $field['name']; ?>" id="<?php echo $field['name']; ?>" value="<?php echo $field['result']; ?>" />
    </div>
<!--    <div class="layui-inline" readonly id="upload_preview"></div>    -->
</div>

<div class="layui-form-item layui-hide" id="upload_progress">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline" style="width:21%;">
        <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
        </div>
    </div>
</div>



<script>

    $(function () {



        //拖拽上传文件
        const dragbox = document.querySelector('.dragFile2');
        dragbox.addEventListener('dragover', function (e) {
            e.preventDefault(); // 必须阻止默认事件
        }, false);
        dragbox.addEventListener('drop', function (e) {
            e.preventDefault(); // 阻止默认事件
            var file = null,
                    data = e.dataTransfer.types;
            for (var i = 0; i < data.length; i += 1) {
                if (data[i] === 'Files') {
                    file = e.dataTransfer.files; //获取文件
                    break;
                } else {
                    var text = e.dataTransfer.getData('text/plain');
                    $('.dragFile2').append(text); //将拖拽的文字添加到容器里
                    break;
                }
            }
            
           // console.log(file[0].type)
            
            if (file && file[0].type.indexOf('application') !== -1) {               

                var formData = new FormData();
                formData.append('file', file[0]); //上传单个文件的添加方式
                upload(formData); //upload 异步上传
            }
        }, false);



        function upload(formData) {
            if (formData.length < 1) {
                return; //阻止上传，也可以写提示语
            }
            $.ajax({
                url: '<?php echo url('admin/res/file_upload') ?>', //上传的路径
                type: "POST",
                data: formData,
                processData: false, //阻止jQuery 序列化
                contentType: false,
                dataType: "json", //返回格式
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                    xhr.upload.addEventListener('progress', function (e) {
                        //loaded代表上传了多少
                        //total代表总数为多少
                        var progressRate = Math.floor(e.loaded / e.total * 100)  + '%';                        
                        
                        element.progress('upload_progress', progressRate);
                        
                    })

                    return xhr;
                },
                beforeSend: function () {
                    //这里可以加一些上传前的特效，用于改善用户体验
                    element.progress('upload_progress', '0%');
                    $("#upload_progress").removeClass("layui-hide");
                },
                success: function (res) {
                   // console.table(res);
                    if (res.code) {
                        //上传失败的事件
                        layer.msg(res.msg);
                    } else {
                        layer.msg("上传成功");
                        //上传成功后的事件
                        $('#<?php echo $field['name']; ?>').val(res.data.src);
                        $('#size').val(res.data.size);
                    }
                },
                complete: function () {
                    //上传完成后的事件
                    $("#upload_progress").addClass("layui-hide");
                },
                error: function (res) {
                    console.log(res);
                    $("#upload_progress").addClass("layui-hide");
                }
            });
        }

    })

</script>